<template>
    <div class="dashboard-container">
        <!-- 统计卡片 -->
        <el-row :gutter="20">
            <el-col :span="6">
                <el-card shadow="hover" class="stat-card">
                    <template #header>
                        <div class="card-header">
                            <i class="el-icon-document"></i>
                            <span>文章数量</span>
                        </div>
                    </template>
                    <div class="card-body">
                        <h2>{{ statistics.articleCount }}</h2>
                        <p>总文章数</p>
                    </div>
                </el-card>
            </el-col>

            <el-col :span="6">
                <el-card shadow="hover" class="stat-card">
                    <template #header>
                        <div class="card-header">
                            <i class="el-icon-chat-line-round"></i>
                            <span>评论数量</span>
                        </div>
                    </template>
                    <div class="card-body">
                        <h2>{{ statistics.commentCount }}</h2>
                        <p>总评论数</p>
                    </div>
                </el-card>
            </el-col>

            <el-col :span="6">
                <el-card shadow="hover" class="stat-card">
                    <template #header>
                        <div class="card-header">
                            <i class="el-icon-user"></i>
                            <span>用户数量</span>
                        </div>
                    </template>
                    <div class="card-body">
                        <h2>{{ statistics.userCount }}</h2>
                        <p>注册用户数</p>
                    </div>
                </el-card>
            </el-col>

            <el-col :span="6">
                <el-card shadow="hover" class="stat-card">
                    <template #header>
                        <div class="card-header">
                            <i class="el-icon-view"></i>
                            <span>访问量</span>
                        </div>
                    </template>
                    <div class="card-body">
                        <h2>{{ statistics.viewCount }}</h2>
                        <p>总访问量</p>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <!-- 访问趋势图 -->
        <el-row :gutter="20" class="mt-20">
            <el-col :span="24">
                <el-card shadow="hover">
                    <template #header>
                        <div class="card-header">
                            <span>访问趋势</span>
                            <el-radio-group v-model="visitDays" size="small">
                                <el-radio-button :label="7">近7天</el-radio-button>
                                <el-radio-button :label="30">近30天</el-radio-button>
                            </el-radio-group>
                        </div>
                    </template>
                    <div class="chart-container">
                        <div ref="visitChart" style="width: 100%; height: 350px"></div>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <!-- 最新动态 -->
        <el-row :gutter="20" class="mt-20">
            <el-col :span="12">
                <el-card shadow="hover">
                    <template #header>
                        <div class="card-header">
                            <span>最新文章</span>
                            <el-button type="text" @click="$router.push('/admin/article/list')">
                                查看更多
                            </el-button>
                        </div>
                    </template>
                    <div class="latest-list">
                        <el-table :data="latestArticles" style="width: 100%" :show-header="false">
                            <el-table-column prop="title" label="标题">
                                <template #default="scope">
                                    <el-link type="primary" :underline="false" @click="viewArticle(scope.row)">
                                        {{ scope.row.title }}
                                    </el-link>
                                </template>
                            </el-table-column>
                            <el-table-column prop="createTime" label="发布时间" width="150" align="right">
                                <template #default="scope">
                                    <span>{{ formatDate(scope.row.createTime) }}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-card>
            </el-col>

            <el-col :span="12">
                <el-card shadow="hover">
                    <template #header>
                        <div class="card-header">
                            <span>最新评论</span>
                            <el-button type="text" @click="$router.push('/admin/comment')">
                                查看更多
                            </el-button>
                        </div>
                    </template>
                    <div class="latest-list">
                        <el-table :data="latestComments" style="width: 100%" :show-header="false">
                            <el-table-column width="40">
                                <template #default="scope">
                                    <el-avatar :size="30" :src="scope.row.avatar"></el-avatar>
                                </template>
                            </el-table-column>
                            <el-table-column>
                                <template #default="scope">
                                    <p class="comment-content">{{ scope.row.content }}</p>
                                    <p class="comment-info">
                                        <span>{{ scope.row.username }}</span>
                                        <span>评论文章:</span>
                                        <el-link type="primary" :underline="false"
                                            @click="viewArticle(scope.row.article)">
                                            {{ scope.row.article.title }}
                                        </el-link>
                                    </p>
                                </template>
                            </el-table-column>
                            <el-table-column prop="createTime" width="150" align="right">
                                <template #default="scope">
                                    <span>{{ formatDate(scope.row.createTime) }}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick, watch } from 'vue'
import { useRouter } from 'vue-router'
import * as echarts from 'echarts'
import dashboardApi from '@/api/dashboard'
import { formatDate } from '@/utils/date'

const router = useRouter()
const visitChart = ref()
const visitDays = ref(7)

const statistics = ref({
    articleCount: 0,
    commentCount: 0,
    userCount: 0,
    viewCount: 0
})

const latestArticles = ref([])
const latestComments = ref([])

// 获取统计数据
const getStatistics = async () => {
    try {
        const res = await dashboardApi.getStatistics()
        if (res.code === 200) {
            statistics.value = res.data
        }
    } catch (error) {
        console.error('获取统计数据失败:', error)
    }
}

// 获取最新文章
const getLatestArticles = async () => {
    try {
        const res = await dashboardApi.getLatestArticles({ limit: 10 })
        if (res.code === 200) {
            latestArticles.value = res.data
        }
    } catch (error) {
        console.error('获取最新文章失败:', error)
    }
}

// 获取最新评论
const getLatestComments = async () => {
    try {
        const res = await dashboardApi.getLatestComments({ limit: 10 })
        if (res.code === 200) {
            latestComments.value = res.data
        }
    } catch (error) {
        console.error('获取最新评论失败:', error)
    }
}

// 初始化访问趋势图
const initVisitChart = async () => {
    try {
        const res = await dashboardApi.getVisitTrend({ days: visitDays.value })
        if (res.code === 200) {
            const chart = echarts.init(visitChart.value)
            chart.setOption({
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: res.data.dates
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: res.data.counts,
                    type: 'line',
                    smooth: true,
                    areaStyle: {}
                }]
            })
        }
    } catch (error) {
        console.error('获取访问趋势失败:', error)
    }
}

// 查看文章详情
const viewArticle = (article: any) => {
    router.push(`/admin/article/edit/${article.id}`)
}

// 监听访问天数变化
watch(visitDays, () => {
    nextTick(() => {
        initVisitChart()
    })
})

onMounted(() => {
    getStatistics()
    getLatestArticles()
    getLatestComments()
    nextTick(() => {
        initVisitChart()
    })
})
</script>

<style scoped>
.dashboard-container {
    width: 100%;
    height: 100%;
    padding: 20px;
}

.mt-20 {
    margin-top: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stat-card .card-body {
    text-align: center;
}

.stat-card h2 {
    font-size: 28px;
    margin: 10px 0;
    color: #409EFF;
}

.stat-card p {
    color: #909399;
    font-size: 14px;
}

.chart-container {
    padding: 10px;
}

.latest-list {
    .comment-content {
        margin: 0;
        font-size: 14px;
    }

    .comment-info {
        margin: 5px 0 0;
        font-size: 12px;
        color: #909399;

        span {
            margin-right: 5px;
        }
    }
}
</style>